<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-02 17:04:52
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-24 16:41:27
 * @FilePath: \cxl-h5\src\pages\login\login\Index.vue
-->
<template>
    <section class="login-container">
        <section class="login-poster">
            <section class="login-welcome">
                <h2>欢迎来到汽车服务</h2>
                <h3>秉承第三方，安全、放心；权威机构加持~</h3>
            </section>
        </section>
        <section class="login-box">
            <section class="form">
                <cxl-input
                    type="number"
                    v-model="data.data.phone"
                    placeholder="请输入手机号码"
                    round
                    clearable
                    bgColor="#f2f6f8"
                    required
                    checkType="phone"
                    ref="phoneRef"
                ></cxl-input>
                <cxl-input
                    type="password"
                    v-model="data.data.password"
                    placeholder="请输入密码"
                    showPassword
                    round
                    clearable
                    bgColor="#f2f6f8"
                    required
                    check-type="password"
                    ref="passwordRef"
                ></cxl-input>
            </section>
            <section class="checkbox">
                <section>
                    <label>
                        <cxl-checkbox v-model="data.data.checked" @change="data.onCheckChange" />我已阅读并同意
                        <i @click.prevent="data.onOpenProtocol" data-type="USER_AGREEMENT">《用户使用协议》</i>、<i
                            @click.prevent="data.onOpenProtocol"
                            data-type="PRIVACY_AGREEMENT"
                            >《隐私协议》</i
                        ></label
                    >
                    <section class="err img">
                        {{ data.isSelectCheck ? '' : '请仔细阅读协议并勾选！' }}
                    </section>
                </section>
            </section>

            <section class="login">
                <cxl-button
                    type="primary"
                    round
                    @click="data.onSubmitLogin(phoneRef, passwordRef)"
                    :active="data.data.phone && data.data.password && data.data.checked"
                    >登录</cxl-button
                >
            </section>
            <section class="register">
                <section @click="data.onSkip" data-url="/register">企业注册</section>
            </section>

            <section class="retrieve">
                <section @click="data.onSkip" data-url="/retrieve">忘记密码？</section>
            </section>
        </section>
        <dialogVue v-model="data.auditVisible" type="submit">
            <template #content>
                <section class="dialog">
                    <h1>您提交的申请正在审核中， 请耐心等待！</h1>
                </section>
            </template>
        </dialogVue>

        <dialogVue v-model="data.failVisible" type="error">
            <template #content>
                <section class="dialog">
                    <h1>很抱歉！</h1>
                    <p>您提交的资料不符合申请要求。</p>
                </section>
            </template>
            <template #operation>
                <cxl-button type="primary" @click="data.onSkip" data-url="/register">重新注册</cxl-button>
            </template>
        </dialogVue>
    </section>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { LoginData } from '.'
import dialogVue from '@/components/dialog/Index.vue'
const phoneRef = ref()
const passwordRef = ref()
const data = reactive(new LoginData())
</script>

<style scoped lang="scss" src="./index.scss"></style>
